<template>
  <div>
    <div v-if="!addShow">
      <el-card>
        <el-row type="flex" justify="space-between">
          <span></span
          ><el-button size="small" @click="addShow = true" type="primary" plain
            >新增试题</el-button
          ></el-row
        >
        <QuestionFrom
          @changeType="simpleModel = !simpleModel"
          ref="formRefs"
          @updateList="initData"
        ></QuestionFrom>
        <el-table
          border
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55px"> </el-table-column>
          <el-table-column label="试题信息">
            <template slot-scope="scope">
              <question-list
                :question="scope.row"
                :simpleModel="simpleModel"
              ></question-list>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
              <!-- 上架：审核通过且没上架才显示 -->
              <el-button
                icon="el-icon-edit"
                type="text"
                circle
                size="small"
                v-if="scope.row.check_state == 2 && scope.row.show_state == 2"
                @click="showHandler({ ...scope.row }, 1)"
                >上架</el-button
              >
              <!-- 下架：上架才下架 -->
              <el-button
                icon="el-icon-edit"
                type="text"
                circle
                size="small"
                v-if="scope.row.show_state == 1"
                @click="showHandler({ ...scope.row }, 2)"
                >下架</el-button
              >
              <!-- 审核：待审核状态才可显示 -->
              <el-button
                icon="el-icon-edit"
                type="text"
                circle
                size="small"
                v-if="scope.row.check_state == 1"
                @click="checkHandler({ ...scope.row })"
                >审核</el-button
              >
              <!-- 修改：下架就可以显示 -->
              <el-button
                @click="editHandler({ ...scope.row })"
                icon="el-icon-edit"
                type="text"
                circle
                v-if="scope.row.show_state == 2"
                size="small"
                >修改</el-button
              >
              <!-- 删除：下架就可删除 -->
              <el-button
                @click="delHandler({ ...scope.row })"
                type="text"
                icon="el-icon-delete"
                size="small"
                v-if="scope.row.show_state == 2"
                circle
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
      <!-- 审核 -->
      <el-dialog title="提示" :visible.sync="checkShow" width="30%">
        <span style="margin-right: 20px">审核结果</span>
        <el-radio v-model="checkInfo.check_state" label="2">通过</el-radio>
        <el-radio v-model="checkInfo.check_state" label="3">不通过</el-radio>
        <el-row style="margin-top: 30px" type="flex" justify="start">
          <span>请输入审核意见：</span>
          <el-input
            type="textarea"
            style="width: 300px"
            :rows="2"
            placeholder="请输入内容"
            v-model="checkInfo.check_remarks"
          >
          </el-input>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeCheck">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 新增 -->
    <addQuestion
      ref="addRef"
      @updateList="initData"
      @back="addShow = false"
      v-else
      :addShow="addShow"
    />

  </div>
</template>

<script>

import QuestionFrom from "@/views/exam/components/QuestionFrom";
import QuestionList from "./components/QuestionList.vue";
import addQuestion from "@/views/exam/components/addQuestion.vue";
import {
  deleteQuestion,
  getQuestionApi,
  getShowQuestionApi,
  checkQuestion,
  getOneApi,
} from "@/api/question";
export default {
  name: "Question",
  components: { QuestionFrom, QuestionList, addQuestion },

  data() {
    return {
      list: [],
      simpleModel: false,
      currentPage4: 1,
      total: 0,
      limit: 10,
      page: 1,
      addShow: false,
      checkShow: false,

      checkInfo: { check_remarks: "", check_state: "2" },
    };
  },
  methods: {
    // ! 初始化数据
    async initData(data) {
      const res = await getQuestionApi(data);
      // console.log(res);
      this.list = res.list;
      this.total = res.total;
      this.page = res.page;
    },
    handleSizeChange(val) {
      const data = this.$refs.formRefs.questionQueryList;
      data.limit = val;
      this.initData(data);
    },
    handleCurrentChange(val) {
      const data = this.$refs.formRefs.questionQueryList;
      data.page = val;
      this.initData(data);
    },
    // 题目上下架
    async showHandler(data, type) {
      await getShowQuestionApi({ id: [data.id], show_state: type });
      this.initData(this.$refs.formRefs.questionQueryList);
    },
    // 审核
    checkHandler(data) {
      this.checkShow = true;
      this.checkInfo.id = data.id;
      console.log(data);
    },
    closeCheck() {
      this.checkShow = false;
      this.check_state = "2";
    },
    async btnOk() {
      await checkQuestion({ checklist: [this.checkInfo] });
      this.checkShow = false;
      this.check_state = "2";
      this.check_remarks = "";
      this.initData();
    },
    // 修改
    async editHandler(data) {
      let res = await getOneApi(data.id);
      // console.log(res);
      this.addShow = true;
      this.$nextTick(async () => {
        this.$refs.addRef.questionQueryList = res;
        this.$refs.addRef.questionQueryList.quest_options = JSON.parse(
          res.quest_options
        );

        // 目录数组
        await this.$refs.addRef.getSubject();
        this.$refs.addRef.formData.directory =
          this.$refs.addRef.formData.subject.filter(
            (item) => item.id == this.$refs.addRef.questionQueryList.subject_id
          )[0].children;
        // 题目数据

        // tag数组
        this.$refs.addRef.formData.tag =
          this.$refs.addRef.formData.directory.filter(
            (item) =>
              item.id == this.$refs.addRef.questionQueryList.directory_id
          )[0].children;
        this.$refs.addRef.questionQueryList.tag_id = res.tag_id.split(",");
        this.$refs.addRef.questionQueryList.tag_id =
          this.$refs.addRef.questionQueryList.tag_id.map((item) => {
            return item - 0;
          });
      });
    },
    // 删除
    async delHandler(data) {
      try {
        await this.$confirm("确认删除吗？");
      } catch (error) {
        return;
      }
      console.log(data);
      await deleteQuestion(data.id);
      this.initData(this.$refs.formRefs.questionQueryList);
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style scoped></style>

